<template>
  <app-header></app-header>
  <div class="content clearfix">
    <div class="detail-left">
      <div class="detail-left-title">{{ product.productName }}（{{ product.productNo }}期）</div>
      <ul class="detail-left-number">
        <li>
          <span>历史年化收益率</span>
          <p><b>{{ product.rate }}</b>%</p>
          <span>历史年化收益率</span>
        </li>
        <li>
          <span>募集金额（元）</span>
          <p><b>{{ product.productMoney }}</b>元</p>
          <span v-if="product.leftProductMoney>0">募集中&nbsp;&nbsp;剩余募集金额{{ product.leftProductMoney }}元</span>
          <span v-else>已满标</span>
        </li>
        <li>
          <span>投资周期</span>
          <p v-if="product.productType === 0"><b>{{ product.cycle }}</b>天</p>
          <p v-else><b>{{ product.cycle }}</b>个月</p>
        </li>

      </ul>
      <div class="detail-left-way">
        <span>收益获取方式</span>
        <span>收益返还：<i>到期还本付息</i></span>
      </div>
      <!--投资记录-->
      <div class="datail-record">
        <h2 class="datail-record-title">投资记录</h2>
        <div class="datail-record-list">
          <table align="center" width="880" border="0" cellspacing="0" cellpadding="0">
            <colgroup>
              <col style="width: 72px"/>
              <col style="width: 203px"/>
              <col style="width: 251px"/>
              <col style="width: 354px"/>
            </colgroup>
            <thead class="datail_thead">
            <tr>
              <th>序号</th>
              <th>投资人</th>
              <th>投资金额（元）</th>
              <th>投资时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(bid,index) in bidList" :key="bid.id">
              <td>{{ index + 1 }}</td>
              <td class="datail-record-phone">{{ bid.phone }}</td>
              <td>{{ bid.bidMoney }}</td>
              <td>{{ bid.bidTime }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <!--右侧-->
    <div class="detail-right">
      <div class="detail-right-title">立即投资</div>
      <div class="detail-right-mode">
        <h3 class="detail-right-mode-title">收益方式</h3>
        <p class="detail-right-mode-p"><span>到期还本付息</span></p>
        <h3 class="detail-right-mode-title">我的账户可用</h3>
        <div class="detail-right-mode-rmb" v-if="accountMoney>-1">
          <p>资金（元）：{{ accountMoney }}</p>
        </div>
        <div class="detail-right-mode-rmb" v-else>
          <p>资金（元）：******</p>
          <a href="javascript;" @click="toLogin">请登录</a>
        </div>
        <h3 class="detail-right-mode-title">预计本息收入{{ showMoney }}（元）</h3>
        <form action="" id="number_submit">
          <p>请在下方输入投资金额</p>
          <input type="text" placeholder="请输入日投资金额，应为100元整倍数" class="number-money" v-model="inputMoney"
                 @blur="checkMoney">
          <div style="color: red;font-size: 19px">{{ inputErr }}</div>
          <input type="button" value="立即投资" class="submit-btn" @click="byProduct">
        </form>

      </div>

    </div>


  </div>
  <AppFooter></AppFooter>
</template>

<script>
import AppHeader from "@/components/AppHeader";
import AppFooter from "@/components/AppFooter";
import {doGet, doPost} from "@/utils/request";

export default {
  name: "DetailsView",
  components: {
    AppHeader,
    AppFooter
  },
  data() {
    return {
      accountMoney: -1,
      productId: 0,
      product: {
        id: 0,
        productName: "",
        rate: 0,
        cycle: 0,
        productType: 0,
        productNo: "",
        productMoney: 0,
        leftProductMoney: 0,
        bidMinLimit: 0,
        bidMaxLimit: 0
      },
      bidList: [{
        id: 0,
        phone: "",
        bidTime: "",
        bidMoney: 0,
      }],
      inputMoney: 100,
      inputErr: '',
      showMoney: 0,
      login: false,
      realname: false,


    }
  },
  mounted() {
    this.productId = this.$route.query.productId;
    if (parseInt(this.productId) > 0) {
      this.loadData();
    }

    //登录.
    if (window.sessionStorage.getItem("ylb")) {
      this.login = true;

      let name = JSON.parse(window.sessionStorage.getItem("ylb")).name;
      if (name != '') {
        this.realname = true;
      }
    }

  },


  methods: {
    loadData() {
      doGet("/product/details", {id: this.productId}).then(resp => {
        if (resp.code === 999) {
          this.product = resp.result.product;
          this.bidList = resp.result.bidList;
          this.accountMoney = resp.result.accountMoney;
        }
      })
    },

    checkMoney() {
      if (isNaN(this.inputMoney)) {
        this.inputErr = '投资金额是整数';
      } else if (parseFloat(this.inputMoney) < 100 || parseFloat(this.inputMoney) % 100 != 0) {
        this.inputErr = '投资金额是100的整数倍';
      } else {
        this.inputErr = '';

        //利息.
        let incomeMoney = 0;
        let dateRate = this.product.rate / 100 / 360;
        if (this.product.productType === 0) {
          incomeMoney = parseFloat(this.inputMoney) * this.product.cycle * dateRate;
        } else {
          incomeMoney = parseFloat(this.inputMoney) * this.product.cycle * 30 * dateRate;
        }

        this.showMoney = (parseFloat(incomeMoney) + parseFloat(this.inputMoney)).toFixed(2);
      }
    },


    //判断登录.
    byProduct() {
      if (!this.login) {
        alert("请您先进行登录");
        return;
      }

      //是否实名认证.
      if (!this.realname) {
        alert("投资,请先实名认证");
        return;
      }


      this.checkMoney();
      if (this.inputErr != '') {
        return;
      }

      if (parseFloat(this.inputMoney) > parseFloat(this.accountMoney)) {
        alert("账户余额不足");
        return;
      }

      if (parseFloat(this.inputMoney) > parseFloat(this.product.leftProductMoney)) {
        alert("产品投资剩余金额不足");
        return;
      }


      if (parseFloat(this.inputMoney) > parseFloat(this.product.bidMaxLimit)) {
        alert("单笔最大投资金额不能超过" + this.product.bidMaxLimit);
        return;
      }
      if (parseFloat(this.inputMoney) < parseFloat(this.product.bidMinLimit)) {
        alert("单笔最小投资金额不能超过" + this.product.bidMinLimit);
        return;
      }


      //可以投资.
      let param = {
        productId: this.productId,
        bidMoney: this.inputMoney
      }
      doPost("/bid/product", param).then(resp => {
        if (resp.code === 999) {
          this.loadData();
        }
      })
    },

    toLogin() {
      this.$router.push({
        path: '/user/login',
        query: {returnUrl: window.location.href}

      })
    },


  }
}
</script>

<style scoped>

</style>